import {h, CircleNode, CircleNodeModel} from "@logicflow/core";
import htm from "htm";

class SquareLakeInput extends CircleNode {
    // 从iconfont下载的svg
    getIcon() {

        // const htm = require("htm");
        //htm.bind(h);
        const {properties} = this.props.model;
        let icon = properties.icon;
        if(icon){
            icon = window.atob(icon);
        }else{
            icon = `<svg t="1669533061458" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3478" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.78125" height="200"><path d="M632.398351 656.400958c18.899951-4.499988 25.699933-27.699928 9.799975-42.399889l-47.499877-43.999885C642.498325 518.501318 794.797928 306.401871 553.998555 2.302664c-3.99999-3.69999-11.59997-3.399991-11.29997 4.299989 69.799818 226.599409-29.299924 333.49913-106.399723 416.698913l-43.599886-40.399894c-11.899969-10.999971-34.49991-2.499993-37.599902 16.699956l-17.199955 248.999351c-2.799993 26.89993 20.999945 48.899872 47.499876 43.999885l246.999356-36.199906z" p-id="3479"></path><path d="M1027.99732 250.702016c0-84.899779-68.89982-153.799599-153.799599-153.799599-23.799938 0-46.299879 5.399986-66.399827 15.099961-29.599923-26.399931-62.699837-48.799873-98.599743-66.599826v79.899791c18.299952 11.299971 35.699907 24.299937 51.999864 38.899899l34.799909 31.099919 42.099891-20.199948c11.299971-5.399986 23.499939-8.199979 36.199905-8.199978 46.19988 0 83.799781 37.599902 83.799782 83.799781 0 14.899961-3.89999 29.499923-11.39997 42.29989-7.299981 12.399968-17.699954 22.89994-30.199922 30.199921l-40.099895 23.499939 5.999984 46.09988c2.099995 16.099958 3.199992 32.499915 3.199992 48.799873 0 77.199799-23.499939 151.299605-67.899823 214.099441-21.399944 30.299921-47.199877 57.199851-76.499801 79.899792a371.649031 371.649031 0 0 1-97.299746 54.199859l-45.099882 16.799956-0.399999 48.099874c-0.199999 22.199942-8.999977 43.099888-24.799936 58.699847-15.799959 15.699959-36.699904 24.299937-58.999846 24.299937-22.199942 0-43.099888-8.599978-58.899846-24.199937-15.899959-15.699959-24.699936-36.499905-24.899935-58.699847l-0.599999-48.099874-45.099882-16.699957c-34.999909-12.999966-67.899823-31.199919-97.599746-54.099859-29.499923-22.699941-55.299856-49.599871-76.799799-79.999791-44.599884-62.899836-68.099822-137.099643-68.099823-214.499441 0-16.299957 1.099997-32.699915 3.199992-48.799873l5.999984-46.099879-40.099895-23.499939a84.059781 84.059781 0 0 1-30.199922-30.199921C73.899807 280.201939 69.999817 265.601977 69.999817 250.702016c0-46.19988 37.599902-83.799781 83.799782-83.799781 12.699967 0 24.899935 2.699993 36.199906 8.199978l42.09989 20.199948 34.799909-31.099919c14.999961-13.399965 30.999919-25.499934 47.899875-36.199906V47.402546c-34.299911 17.399955-66.099828 39.099898-94.599753 64.499832-20.099948-9.599975-42.599889-15.099961-66.399827-15.09996C68.89982 96.902417 0 165.702238 0 250.702016c0 56.699852 30.69992 106.199723 76.299801 132.899654-2.499993 18.99995-3.79999 38.2999-3.79999 57.899849 0 189.899505 119.999687 351.899082 288.199249 414.19892 0.999997 84.099781 69.499819 151.899604 153.799598 151.899604 84.49978 0 152.999601-68.099822 153.799599-152.299603C835.99782 792.700603 955.497509 631.001025 955.497509 441.501519c0-19.599949-1.299997-38.999898-3.79999-57.899849 45.599881-26.69993 76.299801-76.199801 76.299801-132.899654zM709.198151 125.302343V45.402552" p-id="3480"></path></svg>`;
        }


        const html = htm.bind(h);
        const vnode = html([icon]);
        const {x, y, width, height} = this.props.model;
       // const style = this.props.model.getNodeStyle();
        vnode.props.x = x - width / 2+5;
        vnode.props.y = y - height / 2+35;
        vnode.props.width = width/3;
        vnode.props.height = height/3;
        return vnode;
    }

    getShape() {
        const {x, y, r} = this.props.model;
        const style = this.props.model.getNodeStyle();
        return h("g", {}, [h("circle", {
            ...style, cx: x, cy: y, r
        }), this.getIcon()]);
    }
}

class SquareLakeInputModel extends CircleNodeModel {
    initNodeData(data) {
        if (data.text && typeof data.text === "string") {
            data.text = {
                value: data.text, x: data.x+15, y: data.y
            };
        }
        // const id = nanoid(5);
        // data.text.value = data.text.value + "" + id;
        // data.id = data.text.value;
        // var s = super.createId();
        // data.properties.name =data.text.value;
        // data.text.value=data.text.value+s;
        super.initNodeData(data);

        // this.r = 60;
    }

    getNodeStyle() {
        const style = super.getNodeStyle();
        // style.stroke = "#1296db";
        // style.strokeWidth = 4;
        return style;
    }
}

export default {
    type: "JsonInput", model: SquareLakeInputModel, view: SquareLakeInput
};
